<script setup lang="ts">
import { ref } from 'vue'
import { mobileRules, passwordRules, codeRulse } from '@/utils/rules'
import { showToast } from 'vant'
import { loginPassword, sendMobileCode, loginCode } from '@/services/user'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const agree = ref(false)
// 手机号数据
const mobile = ref('13230000066')
// 密码数据
const password = ref('abc12345')
// 验证码数据
const code = ref('')
// 控制密码框的显示或隐藏
const show = ref(false)
// 控制登录是短信or密码
const isPass = ref(false)
// 控制表单dom
const form = ref<HTMLFormElement>()
const { getUserInfo } = useUserStore()
// 表单提交事件 表单验证成功后触发并提交
async function onSubmit() {
  if (!agree.value) return showToast('请勾选不平等条约')
  // 根据不同的登入方式选择不同的接口
  const res = isPass.value ? await loginCode(mobile.value, code.value) : await loginPassword(mobile.value, password.value)
  getUserInfo(res.data)
  router.push('/home')
  showToast('登录成功')
}
// 倒计时时长
const time = ref(0)
const timer = ref<number>()
// 获取验证码
async function getCode() {
  // 在没有输入验证码时单独校验手机号
  await form.value?.validate('mobile')
  console.log('验证通过')
  const res = await sendMobileCode(mobile.value, 'login')
  console.log(res)
  showToast('验证码:' + res.data?.code)
  // 设置倒计时
  time.value = 10
  timer.value = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      clearInterval(timer.value)
    }
  }, 1000)
}

function clickRight() {
  console.log('hh')
}
</script>

<template>
  <div class="login">
    <div class="login-page">
      <CpNavBar rightText="哈哈" @clickRight="clickRight"></CpNavBar>
      <!-- 头部区域 -->
      <div class="login-head">
        <h3>{{ isPass ? '短信登录' : '密码登录' }}</h3>
        <a href="javascript:;">
          <span @click="isPass = !isPass">{{ isPass ? '密码登录' : '短信验证码登录' }}</span>
          <van-icon name="arrow"></van-icon>
        </a>
      </div>
      <!-- 表单区域 -->
      <!-- autocomplete="off" 禁止浏览器 记录你的历史输入实现自动填充的功能 -->
      <van-form autocomplete="off" @submit="onSubmit" ref="form">
        <van-field v-model="mobile" name="mobile" placeholder="请输入手机号" type="tel" :rules="mobileRules"></van-field>
        <van-field v-if="!isPass" v-model="password" placeholder="请输入密码" :type="show ? 'text' : 'password'" :rules="passwordRules">
          <template #right-icon>
            <CpIcon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></CpIcon>
          </template>
        </van-field>
        <van-field v-else v-model="code" placeholder="请输入验证码" type="text" :rules="codeRulse">
          <template #button>
            <van-button v-if="time <= 0" @click="getCode" size="small" type="primary">发送验证码</van-button>
            <span v-else>{{ time }}s后重新发送</span>
          </template>
        </van-field>
        <div class="cp-cell">
          <van-checkbox v-model="agree">
            <span>我已同意</span>
            <a href="javascript:;">用户协议</a>
            <span>及</span>
            <a href="javascript:;">隐私条款</a>
          </van-checkbox>
        </div>
        <div class="cp-cell">
          <van-button block round type="primary" native-type="submit">登 录</van-button>
        </div>
        <div class="cp-cell">
          <a href="javascript:;">忘记密码？</a>
        </div>
      </van-form>
      <!-- 底部区域 -->
      <div class="login-other">
        <van-divider>第三方登录</van-divider>
        <div class="icon">
          <img src="@/assets/qq.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  &-page {
    padding-top: 46px;
  }
  &-head {
    padding: 30px 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1;
    h3 {
      font-weight: normal;
      font-size: 24px;
    }
    a {
      font-size: 15px;
    }
  }
  .van-form {
    padding: 0 14px;
    .cp-cell {
      height: 52px;
      line-height: 24px;
      padding: 14px 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .van-checkbox {
        a {
          color: var(--cp-primary);
          padding: 0 5px;
        }
      }
    }
  }
  &-other {
    margin-top: 60px;
    padding: 0 30px;
    .icon {
      display: flex;
      justify-content: center;
      img {
        width: 36px;
        height: 36px;
        padding: 4px;
      }
    }
  }
}
</style>
